<template>
   <div class="login-page">
      <div class="orange"> </div>
      <div class="blue"></div>
      <div class="blue small"></div>
      <div class="login-box">
         <div class="logo-box">
            <div class="right">
               <div class="sys-name">lyyy-OJ-后台管理</div>
               <div class="sys-sub-name">努力找实习版~</div>
            </div>
         </div>
         <div class="form-box">
            <div class="form-item">
               <img src="../assets/images/shouji.png">
               <el-input v-model="userAccount" placeholder="请输入账号" />
               <!-- <el-input v-model="input" style="width: 240px" placeholder="Please input" /> -->
            </div>
            <div class="form-item">
               <img src="../assets/images/yanzhengma.png">
               <el-input v-model="password" type="password" show-password placeholder="请输入密码" />
            </div>
            <div class="submit-box" @click="loginFun">
               登录
            </div>
         </div>
      </div>
   </div>
</template>
<script setup>

import { ref } from 'vue'
import { loginService } from '@/apis/suser'
import { setToken } from '@/utils/cookie'
import router from '@/router'

const userAccount = ref('')
const password = ref('')


async function loginFun() {
   try {
      const loginResult = await loginService(userAccount.value, password.value)
      console.log("loginResult:", loginResult)
      router.push("/oj/layout")
      setToken(loginResult.data)

   } catch (error) {
      console.log("这里捕获异常error:", error)
      console.log("完整错误:", error)
      console.log("HTTP状态码:", error.response?.status)
      console.log("服务器返回:", error.response?.data)
   }
   // if (loginResult.data.code === 1000) {  // 优化点1：响应数据的解析   优化点2： 响应结果正确性的判断   
   //   //登录成功
   //   console.log("登录成功")
   //   router.push("/oj/system")
   //   setToken(loginResult.data.data)
   // } else {
   //   //登录失败
   //   console.log("登录失败")
   //   ElMessage.error(loginResult.data.msg)
   // }
}

// setTimeout(() =>{
//   console.log(input.value)
// },5000)
</script>
<style lang="scss" scoped>
.login-page {
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;

   .login-box {
      overflow: hidden;

      .logo-box {
         display: flex;
         align-items: center;
         margin-bottom: 30px;

         img {
            width: 68px;
            height: 68px;
            margin-right: 16px;
         }

         .sys-name {
            height: 33px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 24px;
            color: #222222;
            line-height: 33px;
            margin-bottom: 13px;
         }

         .sys-sub-name {
            height: 22px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #222222;
            line-height: 22px;
         }
      }

      :deep(.form-box) {
         .submit-box {
            margin-top: 90px;
            width: 456px;
            height: 48px;
            background: #32C5FF;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 1px;
         }

         .form-item {
            display: flex;
            align-items: center;
            width: 456px;
            height: 48px;
            background: #F8F8F8;
            border-radius: 8px;
            margin-bottom: 30px;
            position: relative;

            .code-btn-box {
               position: absolute;
               right: 0;
               width: 151px;
               height: 48px;
               background: #32C5FF;
               border-radius: 8px;
               top: 0;
               display: flex;
               align-items: center;
               justify-content: center;
               cursor: pointer;

               span {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 16px;
                  color: #FFFFFF;
               }
            }

            .error-tip {
               position: absolute;
               width: 140px;
               text-align: right;
               padding-right: 12px;
               height: 20px;
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               font-size: 14px;
               color: #FD4C40;
               line-height: 20px;
               right: 0;

               &.bottom {
                  right: 157px;
               }
            }

            .el-input {
               width: 380px;
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               font-size: 16px;
               color: #222222;
            }

            .el-input__wrapper {
               border: none;
               box-shadow: none;
               background: transparent;
               width: 230px;
               padding-left: 0;
            }

            img {
               width: 24px;
               height: 24px;
               margin: 0 18px;
            }
         }
      }

      width:456px;
      height:404px;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      opacity: 0.9;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      padding: 0 72px;
      padding-top: 50px;
   }

   &::after {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      bottom: 0;
      right: 0;
      background: rgba(255, 255, 255, .8);
      z-index: 1;
      content: '';
   }

   .orange {
      background: #F0714A;
      width: 498px;
      height: 498px;
      border-radius: 50%;
      background: #F0714A;
      opacity: 0.67;
      filter: blur(50px);
      left: 14.2%;
      top: 41%;
      position: absolute;
   }

   .blue {
      width: 334px;
      height: 334px;
      background: #32C5FF;
      opacity: 0.67;
      filter: blur(50px);
      left: 14.2%;
      top: 42%;
      position: absolute;
      top: 16.3%;
      left: 80.7%;

      &.small {
         width: 186px;
         height: 186px;
         top: 8.2%;
         left: 58.2%;
      }
   }
}
</style>